/**
 *  学习目标：props 校验
 */
import React from 'react'
// 1️⃣第一步：导入用于校验的包(无需下载，React自带的)
// impt→	import PropTypes from 'prop-types'
import PropTypes from 'prop-types'

export default class App extends React.Component {
  render() {
    return (
      <>
        <h1>Props校验</h1>
        <Card title='居家' pageSize={20}>
          <div>居家内容-哈哈哈</div>
        </Card>
        <Card title='美食' options={{ label: '11', value: '22' }}>
          <h2>11</h2>
        </Card>
        <hr />
        <hr />
        <hr />
        <h2>函数组件Porps校验和Props默认值</h2>
        <CardFun title='函数组件标题'>
          <div>函数组件内容</div>
        </CardFun>
      </>
    )
  }
}

class Card extends React.Component {
  // porps:{
  //   aa:{
  //     type:类型,
  //     required: ture,
  //     default:
  //  }
  // }
  // ptypes→	static propTypes = {}
  // 2️⃣步骤2：生成校验的结构体（React规定的）
  static propTypes = {
    // 3️⃣步骤3：书写校验规则
    title: PropTypes.string.isRequired, // 类型为字符串，并且必需传值
    children: PropTypes.any.isRequired, // 不区分类型，但要求必需传值
    // 🔔 进阶用法：shape() 校验特定结构的对象
    options: PropTypes.shape({
      label: PropTypes.string.isRequired,
      value: PropTypes.string,
    }),
    pageSize: PropTypes.number,
  }

  // 注意点：React的Props校验和默认值设置需要写在不同的结构体中
  static defaultProps = {
    pageSize: 10,
  }

  render() {
    return (
      <>
        <h2>卡片标题-{this.props.title}</h2>
        <section>
          {/* 
            React 插槽和 Vue 插槽写法区别：
              Vue插槽 ：  <slot></slot>
              React插槽： { this.props.children }
          */}
          {this.props.children}
        </section>
      </>
    )
  }
}

// 函数组件 Props校验 和 默认Props
function CardFun({ title, children }) {
  return (
    <div>
      <h3>标题{title}</h3>
      <section>{children}</section>
    </div>
  )
}

// 函数组件的校验需要写到函数外部(函数的静态属性)
CardFun.propTypes = {
  title: PropTypes.string.isRequired,
}

CardFun.defaultProps = {
  pageSize: 50,
}
